<template>
  <TwoDialog id="addOfferModal" v-model="showDialog" title="新增询价" width="1100px" @close="handlerCancel">
    <el-form v-model="form" label-width="auto">
      <el-row :gutter="16">
        <el-col :span="16">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="form.productName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="form.source" label="询价类型" prop="source">
            {{ form.source === 'sa' ? '快速询价' : '' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材料" prop="material">
            <el-input v-model="form.material" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="印刷方式" prop="printWay">
            <el-select placeholder="请选择" v-model="form.printWay" clearable>
              <el-option v-for="printWay in printWayList" :label="printWay.dictLabel" :value="printWay.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="LOGO" prop="printLogo">
            <el-select placeholder="请选择" v-model="form.printLogo" clearable>
              <el-option v-for="printLogo in logoLocationList" :label="printLogo.dictLabel" :value="printLogo.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="尺寸类型">
            <div style="width: 100%;">
              <el-row :gutter="16">
                <el-col :span="4">
                  <el-select v-model="form.sizeType" placeholder="请选择类型" @change="form.productSizeArrs = []; form.sizeUnit = ''">
                    <el-option
                      v-for="type in sizeType"
                      :key="type"
                      :label="type"
                      :value="type"
                    />
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-select
                    v-model="form.productSizeArrs"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    :reserve-keyword="false"
                    placeholder="请输入值，按Enter键添加"
                    popper-class="popperClass"
                  >
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="form.sizeUnit" :disabled="form.sizeType === '衣服'" placeholder="请选择单位">
                    <el-option
                      v-for="(unit, index) in units[sizeType.findIndex((f: any) => f === form.sizeType)]"
                      :key="index"
                      :label="unit"
                      :value="unit"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="箱子尺寸" prop="cartonSize">
            <div class="flex">
              <size v-model="form.cartonSize" />
              <div class="ml6">cm</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单箱数量" prop="cartonNum">
            <el-input v-model="form.cartonNum" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单箱重量" prop="cartonWeight">
            <el-input v-model="form.cartonWeight">
              <template #append>kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现货颜色" prop="instockColor">
            <el-input v-model="form.instockColor" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可定制颜色" prop="customColor">
            <el-input v-model="form.customColor" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="印刷尺寸" prop="printSize">
            <el-input v-model="form.printSize" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最小起订量" prop="minOrder">
            <el-input v-model="form.minOrder" type="number" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装方式" prop="packaging">
            <el-select placeholder="请选择" v-model="form.packaging" clearable>
              <el-option v-for="item in packagingList" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
        <el-col :span="8">
          <el-form-item label="版费" prop="setupCharge">
            <el-input v-model="form.setupCharge" type="number">
              <template #prefix>$</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="版费备注" prop="setupChargeRefund">
            <el-input v-model="form.setupChargeRefund" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
        <el-col :span="8">
          <el-form-item label="打样费" prop="sampleCharge">
            <el-input v-model="form.sampleCharge" type="number">
              <template #prefix>￥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="打样费备注" prop="sampleChargeRefund">
            <el-input v-model="form.sampleChargeRefund" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="打样天数" prop="sampleDay">
            <el-input v-model="form.sampleDay" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="素材图" prop="materialImgs">
            <OneUpload v-model="form.materialImgs" accept="" :fileType="[]" :isShowTip="false" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="效果图" prop="effectImgs">
            <OneUpload v-model="form.effectImgs" accept="" :fileType="[]" :isShowTip="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="form.source !== 'sa'" label="工厂询价列表">
        <el-button plain class="add_btn" @click="handlerAdd">+新增</el-button>
      </el-form-item>
      <div v-for="(inquiryFac, index) in form.inquiryFactoryList" class="factory_item">
        <el-row v-if="!form.id">
          <el-form-item :label="'工厂'+(index + 1)" class="form_item">
            <el-select placeholder="请选择" v-model="inquiryFac.factoryId" clearable>
              <el-option v-for="factory in factoryList" :label="factory.name" :value="factory.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="产品地址" class="form_item">
            <el-input v-model="inquiryFac.productUrl" />
          </el-form-item>
        </el-row>
        <el-form-item v-if="!form.id" label="联系电话"  class="form_item">
          <el-input v-model="inquiryFac.telephoneNumber" />
        </el-form-item>
        <div class="table">
          <div class="mb5">报价参数</div>
          <el-table :data="inquiryFac.expressList">
            <el-table-column label="参数" width="100" prop="zero"></el-table-column>
            <el-table-column label="第一档">
              <template #default="scope">
                <el-input v-model="scope.row.one" />
              </template>
            </el-table-column>
            <el-table-column label="第二档">
              <template #default="scope">
                <el-input v-model="scope.row.two" />
              </template>
            </el-table-column>
            <el-table-column label="第三档">
              <template #default="scope">
                <el-input v-model="scope.row.three" />
              </template>
            </el-table-column>
            <el-table-column label="第四档">
              <template #default="scope">
                <el-input v-model="scope.row.four" />
              </template>
            </el-table-column>
            <el-table-column label="第五档">
              <template #default="scope">
                <el-input v-model="scope.row.five" />
              </template>
            </el-table-column>
            <el-table-column label="第六档">
              <template #default="scope">
                <el-input v-model="scope.row.six" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="form.source !== 'sa'" class="del_con">
          <el-button @click="handlerDelFac(index)" plain>删除</el-button>
        </div>
      </div>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
        <el-button size="small" @click="handlerCancel">取消</el-button>
        <el-button v-if="form.source !== 'sa'" size="small" type="primary" @click="handlerSave(false)">
            保存
        </el-button>
        <el-button v-if="form.id && form.source !== 'sa'" size="small" type="primary" @click="handlerSave(true)">
            保存到新询价
        </el-button>
        <el-button size="small" type="primary" @click="saveAndComputed">
            保存并测算
        </el-button>
        </div>
    </template>
    <CountModal :offerId="form.id" @close="countVisable = false" v-if="countVisable" />
  </TwoDialog>
</template>
    
<script lang="ts" setup>
  import { defineProps, ref, defineAsyncComponent, watch } from 'vue';
  import api from '/@/api/email/index';
  import { ElMessage } from 'element-plus';
  import Size from './size.vue';
  import OneUpload from '/@/components/Common/OneUpload.vue';
  const CountModal = defineAsyncComponent(() => import('./countModal.vue'));

  const props = defineProps({
    printWayList: {
      type: Object,
      default: []
    },
    logoLocationList: {
      type: Object,
      default: []
    },
    factoryList: {
      type: Object,
      default: []
    },
    packagingList: {
      type: Object,
      default: []
    },
  });

  const showDialog = ref(false);
  const countVisable = ref(false);
  const form = ref<any>({
    materialImgs: [],
    effectImgs: [],
    inquiryFactoryList: []
  });
  
  const sizeType = ['长宽高', '容积', '衣服', '重量']
  const units = [
    ['in', 'cm'],
    ['oz'],
    ['2XS', 'XS', 'S', 'M', 'L', 'XL', 'XS/S', 'S/M', 'M/L', 'L/XL', '2XL', '3XL', '4XL', '5XL', '6XL'],
    ['g', 'kg', 'lbs'],
  ]
  const emit = defineEmits(['close']);

  const handlerCancel = () => {
    if (form.value.id) {
      form.value = {
        materialImgs: [],
        effectImgs: [],
        inquiryFactoryList: []
      };
    }
    showDialog.value = false
    emit('close');
  };

  const handlerAdd = () => {
    if (!form.value.inquiryFactoryList) {
      form.value.inquiryFactoryList = [];
    }
    form.value.inquiryFactoryList.push({
      expressList: [{
        zero: '数量'
      }, {
        zero: '单价'
      }, {
        zero: '工厂交期'
      }]
    });
  };

  const handlerDelFac = (num: number) => {
    const list = form.value.inquiryFactoryList.filter((item: any, index: number) => index !== num);
    form.value.inquiryFactoryList = list;
  };

  // 监听单位变化 如果从cm 到 in  值除2.54 反之 乘2.54
  watch(() => form.value.sizeUnit, (val, oldVal) => {
    if (form.value.productSizeArrs?.length) {
      if (oldVal === 'cm' && val === 'in') {
        form.value.productSizeArrs = form.value.productSizeArrs.map((m: string | number) => (+m / 2.54).toFixed(2))
      } else if (oldVal === 'in' && val === 'cm') {
        form.value.productSizeArrs = form.value.productSizeArrs.map((m: string | number) => (+m * 2.54).toFixed(2))
      }
    }
  })
  
  const handlerSave = async (isAdd: boolean, showMsg = true) => {
    const obj = { ...form.value };
    const saveFun = form.value.id && !isAdd ? api.offer.edit : api.offer.add;
    if (obj.productSizeArrs.length) {
      if (obj.sizeType === '长宽高') {
        obj.productSize = obj.productSizeArrs.join('*')
      } else {
        obj.productSize = obj.productSizeArrs.join(',')
      }
    }
    obj.materialImgs = obj.materialImgs.map((item: any) => item.url).join(',');
    obj.effectImgs = obj.effectImgs.map((item: any) => item.url).join(',');
    const res = await saveFun(obj);
    if (showMsg === false && !form.value.id) {
      form.value.id = res.data
    }
    if (res.code === 200 && showMsg) {
      ElMessage({ type: 'success', message: '操作成功' });
      emit('close', true);
    }
  };
  const saveAndComputed = async () => {
    try {
      await handlerSave(false, false);
      countVisable.value = true;
    } catch (e) {
      console.log('err', e);
    }
  }
  defineExpose({
    showDialog,
    form
  })
  </script>
  <style lang="scss" scoped>
  .form_item {
    width: 460px;
    margin-right: 0;
    
    &.size {
      :deep(.el-input) {
        width: 65px;
      }
    }

    &.size2 {
      :deep(.el-input) {
        width: 90px;
      }
    }
  }

  .form_half_item {
    width: 170px;
    margin-right: 0;
  }

  .dialog {
    :deep(.el-upload--picture-card) {
      --el-upload-picture-card-size: 50px;
    }
  }

  .logo {
    height: 100px;
    object-fit: contain;
    margin-right: 10px;
  }

  .add_btn {
    color: #3B7AEE;
    border-color: #3B7AEE;
  }

  .factory_item {
    background-color: #F5F6F7;
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .del_con {
    padding-top: 30px;
    text-align: center;
  }

  .table {
    padding: 0 40px;
    :deep(.el-table thead) {
      --el-table-header-bg-color: #fff;
    }
  }

  .upload {
    :deep(.el-upload-list__item-info) {
      display: none;
    }

    :deep(.el-upload-list__item-thumbnail) {
      width: 150px;
      height: 150px;
    }

    :deep(.el-upload-list__item) {
      .el-icon--close, .el-upload-list__item-status-label {
        z-index: 1;
      }
    }
  }
  </style>
  <style>
    .popperClass {
      display: none;
    }
  </style>